const calendarDates = document.getElementById("calendar-dates");
const calendarTitle = document.getElementById("calendar-title");
const selectedDateText = document.getElementById("selected-date-text");
let currentDate = new Date();
let selectedDate = null;
function loadCalendar(date) {
    const year = date.getFullYear();
    const month = date.getMonth();
    const today = new Date();  // 今天的日期

    // 设置标题
    calendarTitle.textContent = `${year}年${month + 1}月`;

    // 清空旧的日期
    calendarDates.innerHTML = "";

    // 获取当月的第一天和最后一天
    const firstDay = new Date(year, month, 1);
    const lastDay = new Date(year, month + 1, 0);

    // 获取第一天的星期，用于空白填充
    const startDayOfWeek = firstDay.getDay();

    // 填充空白日期
    for (let i = 0; i < startDayOfWeek; i++) {
        const emptyDiv = document.createElement("div");
        calendarDates.appendChild(emptyDiv);
    }

    // 填充日期
    // 填充日期
    for (let day = 1; day <= lastDay.getDate(); day++) {
        const dateDiv = document.createElement("div");
        dateDiv.textContent = day;

        const currentDateToCheck = new Date(year, month, day);

        // 判断是否为过去的日期，设置样式为灰色且不可点击
        const today = new Date();
        if (
            currentDateToCheck.getDate() < today.getDate() &&
            currentDateToCheck.getFullYear() === today.getFullYear() &&
            currentDateToCheck.getMonth() === today.getMonth()
        ) {
            dateDiv.classList.add("past-date");
            dateDiv.style.pointerEvents = "none";
            dateDiv.style.cursor = "not-allowed";
        } else {
            // 高亮今天的日期
            if (
                currentDateToCheck.getDate() === today.getDate() &&
                currentDateToCheck.getFullYear() === today.getFullYear() &&
                currentDateToCheck.getMonth() === today.getMonth()
            ) {
                dateDiv.classList.add("today");
            }

            // 高亮选中的日期
            if (
                selectedDate &&
                day === selectedDate.getDate() &&
                year === selectedDate.getFullYear() &&
                year === selectedDate.getFullYear() &&
                month === selectedDate.getMonth()
            ) {
                dateDiv.classList.add("selected");
            }
        }

        // 所有非过去日期都添加点击事件
        dateDiv.addEventListener("click", () => {
            selectDate(new Date(year, month, day));
        });

        calendarDates.appendChild(dateDiv);
    }
}


// 选择日期函数
// 选择日期函数
function selectDate(date) {
    const now = new Date();
    const sevenDaysLater = new Date();
    sevenDaysLater.setDate(now.getDate() + 7);

    // 判断是否为今天的日期
    if (
        date.getDate() === now.getDate() &&
        date.getFullYear() === now.getFullYear() &&
        date.getMonth() === now.getMonth()
    ) {
        selectedDate = date;
        loadCalendar(currentDate);
        // 更新选中的日期显示
        selectedDateText.textContent = `${selectedDate.getFullYear()}-${selectedDate.getMonth() + 1}-${selectedDate.getDate()}`;
        return;
    }

    // 只能选择未来七天内的日期
    if (date > sevenDaysLater) {
        const alertDiv = document.createElement('div');
        alertDiv.textContent = '只能预约七天以内';
        alertDiv.style.position = 'fixed';
        alertDiv.style.top = '50%';
        alertDiv.style.left = '50%';
        alertDiv.style.transform = 'translate(-50%, -50%)';
        alertDiv.style.backgroundColor = 'white';
        alertDiv.style.padding = '20px';
        alertDiv.style.borderRadius = '5px';
        alertDiv.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.3)';
        alertDiv.classList.add('alert-fade-in-out');
        document.body.appendChild(alertDiv);

        // 设置定时器，3秒后自动移除提示框
        setTimeout(() => {
            document.body.removeChild(alertDiv);
        }, 2000);

        return;
    }

    selectedDate = date;
    loadCalendar(currentDate);
    // 更新选中的日期显示
    selectedDateText.textContent = `${selectedDate.getFullYear()}-${selectedDate.getMonth() + 1}-${selectedDate.getDate()}`;
}

// 更改月份
function changeMonth(offset) {
    currentDate.setMonth(currentDate.getMonth() + offset);
    loadCalendar(currentDate);
}

// 页面加载时显示当前日期的日历
document.addEventListener("DOMContentLoaded", () => {
    loadCalendar(currentDate);
});